<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剁手街</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="css/duosou.css" rel="stylesheet">
</head>
<body>
<div class="top-nav">
    <div class="container clear-float">
        <div class="fl">
            <a class="item" href="#">首页</a>
        </div>
        <div class="fr">
            <a class="item" href="#">我的订单</a>
            <a class="item" href="#">购物车</a>
            <a href="#" class="item">登录</a>
            <a href="#" class="item">注册</a>
        </div>
    </div>
</div>
<div class="header clear-float">
    <div class="container ">
        <div class="col-2 logo">
            香菇街
        </div>
        <div class="col-5 search-bar">

            <input type="text ">
            <button>搜索</button>
        </div>
        <div class="col-3 cart">

            <a href="#">我的购物车</a>
        </div>
    </div>
</div>
<div class="main-promote clear-float">
    <div class="container ">
        <div class="col-2 cat">
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>

        </div>
        <div class="col-6">
            <img src="img/2k9h.png">

        </div>
        <div class="col-2 info clear-float">
            <div class="auth">
                <div class="avatar"></div>
                你好，欢迎来剁手
            </div>
            <div class="gonggao">
                <div class="title">公告</div>
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores earum magnam nostrum sed. Aut
                    commodi ducimus ex explicabo hic in quam suscipit. Deleniti dignissimos eius id nostrum repellat,
                    ullam vel.
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="cat-promote clear-float">
        <div class="title">女装</div>
        <div class="content">
            <div class="col-2 item">
                <div class="card" style="background: #d3b3e2;">
                </div>

            </div>
            <div class="col-3 item">
                <div style="background: #afc4e4;" class="card"></div>
            </div>
            <div class="col-2 item">
                <div style="background: #f9e279;" class="card"></div>

            </div>
            <div class="col-3 item">
                <div style="background: #95e89b;" class="card"></div>

            </div>
        </div>
    </div>
    <div class="cat-promote clear-float">
        <div class="title">男装</div>
        <div class="content">
            <div class="col-2 item">
                <div class="card" style="background: #d3b3e2;">
                </div>

            </div>
            <div class="col-3 item">
                <div style="background: #afc4e4;" class="card"></div>
            </div>
            <div class="col-2 item">
                <div style="background: #95e89b;" class="card"></div>

            </div>
            <div class="col-3 item">

                <div style="background: #f9e279;" class="card"></div>
            </div>
        </div>
    </div>
    <div class="cat-promote clear-float">
        <div class="title">儿童</div>
        <div class="content">
            <div class="col-2 item">
                <div style="background: #95e89b;" class="card"></div>
                </div>

            </div>
            <div class="col-3 item">
                <div style="background: #f9e279;" class="card"></div>
            </div>
            <div class="col-2 item">

                <div style="background: #afc4e4;" class="card"></div>
            </div>
            <div class="col-3 item">

                <div class="card" style="background: #d3b3e2;">
            </div>
        </div>
    </div>
</div>

<div class="footer clear-float">
    <div class="container">
        剁手街由贵州贵阳学院热情奉献，若有问题，概不负责！
    </div>
</div>
</body>
</html>